<!--
 * @Description: 应用名称、描述与管理员
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-12-15 21:25:43
 * @LastEditTime: 2022-09-23 14:43:42
-->
<template>
	<a-card class="card-box card-style-c" @click="toPath(item)">
		<div class="card-box-top">
			<div class="card-box-icon">
				<img :src="item.icon" alt />
			</div>
			<div class="card-box-right">
				<div class="right-title">
					<EllipsisTooltip :title="item.name" />
				</div>
				<div class="right-detail">
					<EllipsisTooltip :title="item.descript" />
				</div>
			</div>
		</div>
		<div class="card-box-bottom">
			<div class="box-bottom-avatar">
				<ok-person-cell
					.personInfo="item.user_bo"
					width="16px"
					height="16px"
				></ok-person-cell>
			</div>
			<EllipsisTooltip :title="item.user_bo.employee_name" />
			<div
				v-if="item.collected"
				class="card-collected"
				@click.stop="collectionEvents(item)"
			>
				<i class="low-code iconshoucang collected"></i>
			</div>
			<div class="card-favorite" v-else @click.stop="collectionEvents(item)">
				<i class="low-code icondaishoucang card-favorite-icon"></i>
			</div>
		</div>
	</a-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
const userColor = {
	female: '#E672B7', // 'linear-gradient(180deg, #FD99D5 0%, #E672B7 100%)',
	male: '#64A3FF', // 'linear-gradient(360deg, #387FF5 3.23%, #64A3FF 100%)',
}
const props = defineProps<{ item: object }>()
const emit = defineEmits(['toPath', 'collectionEvents'])

const toPath = (item: any) => {
	emit('toPath', item)
}
const collectionEvents = (item: any) => {
	emit('collectionEvents', item)
}
</script>

<style lang="less" scoped>
.card-style-c.card-box {
	height: 90px;
	&:hover {
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08);
		.card-favorite {
			margin-top: -16px;
			display: block !important;
			background: url('@/assets/images/card_favorite_bg.svg');
		}
	}

	:deep {
		.ant-card-body {
			padding: 0px;
			display: flex;
			flex-direction: column;
		}
	}

	.card-box-top {
		display: flex;
		padding: 16px 16px 8px;

		.card-box-icon {
			min-width: 40px;
			height: 40px;
			width: 40px;
			img {
				width: 100%;
				height: 100%;
				border-radius: 9px;
			}
		}
		.card-box-right {
			height: 40px;
			line-height: 1;
		}
	}
	.card-box-bottom {
		height: 24px;
		background-color: #f7f8fa;
		border-radius: 0 0 6px 6px;
		padding-left: 15px;
		display: flex;
		align-items: center;

		.box-bottom-avatar {
			margin-right: 10px;
			line-height: 1;
		}

		.ant-avatar-sm {
			height: 16px;
			width: 16px;
			margin-right: 10px;
		}
		.right-detail-admin {
			height: 16px;
			width: 16px;
			margin-right: 5px;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			line-height: 16px;
		}
		.pok-ellipsis-tooltip {
			width: calc(100% - 60px);
		}

		.card-collected,
		.card-favorite {
			margin-top: 0;
			min-width: 25px;
			text-align: center;
			line-height: 24px;
			width: 25px;
			height: 24px;
			background: none;
			background-size: 100% 100%;
			margin-left: 5px;
			.collected {
				color: @rok-collected-color;
			}
		}

		.card-favorite {
			display: none;
			color: @rok-mobile-disabled-color;
			&:hover {
				color: @rok-collected-color;
			}
		}
	}
}
</style>
